<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
	<title>权限资源管理</title>
	<script src="${ctx}/static/js/jquery.validate.min.js"></script>
	<script src="${ctx}/static/js/messages_bs_zh.js"></script>
	<style type="text/css">
/* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */
.jcrop-holder #preview-pane {
  display: block;
  position: absolute;
  z-index: 2000;
  top: 10px;
  right: -280px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

/* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */
#preview-pane .preview-container {
  width: 360px;
  height: 180px;
  overflow: hidden;
}
</style>
	
</head>
<body>

	<div class="main-content-inner">
		<!-- #section:basics/content.breadcrumbs -->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>
	
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="${ctx}/welcome">主页</a>
				</li>
				<li class="active">权限资源</li>
			</ul><!-- /.breadcrumb -->
	
		</div>	
		<!-- /section:basics/content.breadcrumbs -->
		
		<div class="page-content">
			
			<c:if test="${not empty message}">
				<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
			</c:if>	
			
			<div class="page-header">
				<h1>
					权限资源
					<small>
						<i class="ace-icon fa fa-angle-double-right"></i>
						<c:choose>
							<c:when test="${action eq 'create' }">
								新增
							</c:when>
							<c:otherwise>
								更新
							</c:otherwise>
						</c:choose>
					</small>
				</h1>
			</div><!-- /.page-header -->			
			
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">

							<form id="inputForm" action="${ctx}/permission/${action}" method="post" class="form-horizontal">
								<input type="hidden" name="id" id="id" value="${permission.id}"/>
<!-- 								<input type="hidden" name="status" value=""/> -->
<!-- 								<input type="hidden" name="userType" value="2"/> -->
								
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 权限名称: </label>
									<div class="col-sm-9">
										<input type="text" maxlength="50"  autocomplete="off" id="name"  name="name"  value="${permission.name}" placeholder="请输入权限名称" class="col-xs-10 col-sm-5 required" />
									</div>
								</div>
								
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 权限标识: </label>
									<div class="col-sm-9">
										<input type="text" maxlength="100"  autocomplete="off" id="permissionname"  name="permissionname"  value="${permission.permissionname}" placeholder="请输入权限标识,如user:create" class="col-xs-10 col-sm-5 required" />
									</div>
								</div>
								
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 权限类型: </label>
									<div class="col-sm-4">
										<select class="form-control required" id="type" name="type">
												<option value="0">请选择</option>
												<option value="1" <c:if test="${permission.type == '1' }">selected="selected"</c:if> >主菜单</option>
												<option value="2" <c:if test="${permission.type == '2' }">selected="selected"</c:if> >子菜单</option>
												<option value="3" <c:if test="${permission.type == '3' }">selected="selected"</c:if> >按钮</option>
										</select>
									</div>
								</div>	
								<!-- 根据类型控制显隐 -->
								<!-- start 主菜单 -->
								<div id="menudiv" hidden="hidden">
									<div class="form-group">
										<label class="col-sm-3 control-label no-padding-right" for="form-field-1">主菜单：</label>
										<div class="col-sm-3">
											<select class="form-control" id="menu" name="menu" >
												<option value="0" >请选择</option>
											</select>
										</div>
									</div>
								</div>
								<!-- end 主菜单 -->
								<!-- start 子菜单-->
								<div id="submenudiv" hidden="hidden">
									<div class="form-group">
										<label class="col-sm-3 control-label no-padding-right" for="form-field-1">子菜单：</label>
										<div class="col-sm-3">
											<select class="form-control" id="submenu" name="submenu" >
												<option value="0" >请选择</option>
											</select>
										</div>
									</div>
								</div>	
								<!-- end 子菜单 -->		
								<!-- 控制显隐 -->
						       <div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1">是否可用: </label>
									<div class="col-sm-2">
										<select class="chosen-select form-control" id="deltag" name="deltag" data-placeholder="是否可用">
											<option value="0" <c:if test="${permission.deltag eq '0' }">selected="selected"</c:if>>可用</option>
											<option value="1" <c:if test="${permission.deltag eq '1' }">selected="selected"</c:if>>不可用</option>
										</select>
									</div>
								</div>
								
								<div class="clearfix form-actions">
									<div class="col-md-offset-3 col-md-9">
										<button id="submit_btn" class="btn btn-info" type="submit">
											<i class="ace-icon fa fa-check bigger-110"></i>
											提交
										</button>

										&nbsp; &nbsp; &nbsp;
										<button id="cancel_btn" class="btn" type="reset" onclick="history.back()">
											<i class="ace-icon fa fa-undo bigger-110"></i>
											返回
										</button>
									</div>
								</div>
								
							</form>
						</div><!-- /.span -->
					</div><!-- /.row -->			
				</div>
			</div>
			
		</div><!-- /.page-content -->
	</div>



	<!-- inline scripts related to this page -->

	<script>

		$(document).ready(function() {
		
			//为inputForm注册validate函数
			$("#inputForm").validate({
				rules:{
					name:{
						rangelength:[2,20],
						required :true
					}
				},
				messages: {
					
				}
			});
			
		});
		
		/**类型修改显示*/
		$("#type").bind("change",function(){
			var type =$("#type").val();
			if(type=='0' || type=='1'){
				$("#menu").empty();
				$("#submenu").empty();
				$("#menudiv").fadeOut();
				$("#submenudiv").fadeOut();
			}
			if(type =='2'){
				$("#menu").empty();
				$("#submenu").empty();
				getMenu();
				$("#menudiv").fadeIn();
				$("#submenudiv").fadeOut("slow");
				
			}
			if(type =='3'){
				$("#menu").empty();
				$("#submenu").empty();
				getMenu();
				$("#menudiv").fadeIn();
				$("#submenudiv").fadeIn();
			}
			
		})
		
		/**显示主菜单*/
		function getMenu(){
			$.ajax({
				type:'get',
				url:'${ctx}/permission/getmenu',
				data:{type:1},
				success:function(data){
					console.log(data);
			        $("#menu").append("<option value='0'>请选择</option>");
			        for(var i=0; i< data.length; i++) {
			        	$("#menu").append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
			        }
				}
			});
		}
		
		/**主/子菜单联动*/
		 $("#menu").change(
			function() {
				$("#submenu").empty();
				$.ajax({
					type:'get',
					url:'${ctx}/permission/getmenu',
					data:{type:2,pid:$("#submenu").val()},
					success:function(data) {    
				        console.log(data);
				        $("#submenu").append("<option value='0'>请选择</option>");
				        for(var i=0; i< data.length; i++) {
				        	$("#submenu").append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
				        }
				     }
				});
			}
		);
		
	</script>
</body>
</html>
